<template>
    <ul class="footer">
        <router-link 
            v-for="(item,i) in footerNav"
            :to="item.path"
            :key="i"
            tag="li"
        >
            <i :class="[
                'iconfont',
                item.icon
            ]"></i>
            {{item.title}}
        </router-link>
    </ul>
</template>
<script>
import {routes} from '@/router'
export default {
    name:'foot',
    computed:{ // watch methods computed区别
        footerNav(){
            return routes.filter(item => item.footerNav).map(val => {
                return {
                    path:val.path,
                    title:val.meta.title,
                    icon:val.meta.icon
                }
            })
        }
    }
}
</script>
<style scoped>
    .footer{
        width:100%;
        height:44px;
        display: flex;
    }

    .footer li{
        flex:1;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .active{
        color:red;
    }
</style>
